<template>
  <view class="container">
    <view class="ui-all">
      <view class="ui-all-title">填写营业执照上的注册名称</view>
      <!-- <view class="uifrom">
				<view>店铺名称</view>
				<input type="text" placeholder="商户名称必填" v-model="from.merchantName" />
			</view> -->
      <view class="uifrom">
        <view>门店地址</view>
        <!-- <input type="text" placeholder="请输入门店地址" v-model="from.storeAddress" @click="getTude" /> -->
        <input
          type="text"
          placeholder="请输入门店地址"
          v-model="from.storeAddress"
        />
      </view>
      <view class="uifrom">
        <view>营业时间</view>
        <view class="uifrom-time">
          <picker
            mode="time"
            :value="startTime"
            start="09:01"
            end="21:01"
            @change="startTimeChange"
          >
            <view class="uni-input" v-if="startTime">{{ startTime }}</view>
            <view class="uifrom-btn" v-else>开始时间</view>
          </picker>
          <text>至</text>
          <picker
            mode="time"
            :value="endTime"
            start="09:01"
            end="21:01"
            @change="endTimeChange"
          >
            <view class="uni-input" v-if="endTime">{{ endTime }}</view>
            <view class="uifrom-btn" v-else>结束时间</view>
          </picker>
        </view>
      </view>
      <view class="uifrom">
        <view>门店分类</view>
        <uni-section title="配置左侧标题" type="line" style="width: 70%">
          <uni-data-select
            v-model="from.classifyId"
            :localdata="typeRang"
            @change="change"
            placeholder="选择门店分类"
            :clear="false"
          ></uni-data-select>
        </uni-section>
      </view>
      <!-- <view class="uifrom uifrom-end">
				<view>抖音视频口令</view>
				<textarea placeholder="请输入抖音视频口令" v-model="from.tikTokAddress"></textarea>
			</view> -->
    </view>
    <!-- <view class="ui1-box">
			<view class="uifrom">
				<view>联系电话</view>
				<input type="text" placeholder="请输入您的电话号码" v-model="from.userMobile" />
			</view>
			<view class="uifrom">
				<view>联系人</view>
				<input type="text" placeholder="请输入联系人的名字" v-model="from.userName" />
			</view>
		</view> -->
    <view class="ui1-box">
      <view class="uifrom b-b">
        <view>缴费保证金</view>
        <input
          type="text"
          placeholder="请输入缴费保证金额"
          v-model="from.deposit"
        />
      </view>
      <view class="uibtn"
        ><button class="save" @tap="savaPay()">确认缴费</button
        ><button class="save" @tap="recallPay()">撤回</button></view
      >
    </view>
    <!-- <view class="pic-box">
			<view class="uifrom">营业执照正面照片</view>
			<view class="imgAvatars" @tap="avatarChoose(1)">
				<image class="imgAvatars-iavatar" v-if="businessLicenseFront" :src="businessLicenseFront | jointPic" mode="widthFix"></image>
				<image class="imgAvatars-iavatars" v-else src="https://bj.hulian2020.cn/imgs/yxstatic/icon/add.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="pic-box">
			<view class="uifrom">身份证号正面照片</view>
			<view class="imgAvatars" @tap="avatarChoose(2)">
				<image class="imgAvatars-iavatar" v-if="idCardFront" :src="idCardFront | jointPic" mode="widthFix"></image>
				<image class="imgAvatars-iavatars" v-else src="https://bj.hulian2020.cn/imgs/yxstatic/icon/add.png" mode="widthFix"></image>
			</view>
		</view> -->
    <view class="pic-box">
      <view class="uifrom">门店图片</view>
      <view class="imgAvatars" @tap="avatarChoose(3)">
        <image
          class="imgAvatars-iavatar"
          v-if="storePicture"
          :src="formatImageUrl(storePicture)"
          mode="widthFix"
        ></image>
        <image
          class="imgAvatars-iavatars"
          v-else
          src="https://bj.hulian2020.cn/imgs/yxstatic/icon/add.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <view class="uifrom-save"
      ><button class="save" @tap="savaInfo()">确 认 申 请</button></view
    >
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { formatImageUrl } from "@/utils/filters";
import { useUserStore } from "@/store/modules/user";
import { post } from "@/utils/request";

// 使用 store
const userStore = useUserStore();

// 表单数据
const form = ref({
  storeAddress: "",
  classifyId: 0,
  deposit: "",
});

// 图片数据
const businessLicenseFront = ref(null);
const idCardFront = ref(null);
const storePicture = ref(null);

// 时间选择
const startTime = ref("");
const endTime = ref("");

// 分类列表
const typeRang = ref([]);

// 图片类型标识
const picType = ref(0);

// 获取门店分类和信息
const getType = async () => {
  try {
    // 获取分类
    const classifyRes = await post("/api/bdc/ct");
    if (classifyRes.data) {
      typeRang.value = classifyRes.data.map((item) => ({
        text: item.classifyName,
        value: item.id,
      }));
    }

    // 获取门店信息
    const infoRes = await post("/api/bdm/mi", {
      userId: userStore.userInfo?.userId,
    });

    if (infoRes.data) {
      form.value = {
        ...infoRes.data,
        classifyId: parseInt(infoRes.data.classifyId),
      };
      businessLicenseFront.value = infoRes.data.businessLicenseFront;
      idCardFront.value = infoRes.data.idCardFront;
      storePicture.value = infoRes.data.storePicture;
    }
  } catch (error) {
    console.error("获取门店信息失败:", error);
  }
};

// 分类选择变化
const change = (e) => {
  form.value.classifyId = e;
};

// 选择地址
const getTude = () => {
  uni.chooseLocation({
    success: (res) => {
      form.value.storeAddress = `${res.address}${res.name}`;
      form.value.storeLatitude = res.latitude;
      form.value.storeLongitude = res.longitude;
    },
  });
};

// 开始时间变化
const startTimeChange = (e) => {
  startTime.value = `${e.detail.value}:00`;
};

// 结束时间变化
const endTimeChange = (e) => {
  endTime.value = `${e.detail.value}:00`;
};

// 保存门店信息
const savaInfo = async () => {
  try {
    const res = await post("/api/bdm/mm", {
      businessLicenseFront: businessLicenseFront.value,
      classifyId: form.value.classifyId,
      idCardFront: idCardFront.value,
      merchantName: form.value.merchantName,
      storeAddress: form.value.storeAddress,
      storeBusinessHours: `${startTime.value} - ${endTime.value}`,
      storeLatitude: "",
      storeLongitude: "",
      storePicture: storePicture.value,
      tikTokAddress: form.value.tikTokAddress,
      userId: userStore.userInfo?.userId,
      userMobile: form.value.userMobile,
      userName: form.value.userName,
    });

    uni.showToast({
      title: res.message || "保存成功",
      icon: "none",
    });
  } catch (error) {
    console.error("保存门店信息失败:", error);
  }
};

// 缴费保证金
const savaPay = async () => {
  try {
    const res = await post("/api/bdm/mpd", {
      merchantId: form.value.id,
      payDeposit: form.value.deposit,
    });

    uni.showToast({
      title: res.message || "缴费成功",
      icon: "none",
    });

    getType();
  } catch (error) {
    console.error("缴费失败:", error);
  }
};

// 撤回保证金
const recallPay = async () => {
  try {
    const res = await post("/api/bdm/mrd", {
      merchantId: form.value.id,
      refundDeposit: form.value.deposit,
    });

    uni.showToast({
      title: res.message || "撤回成功",
      icon: "none",
    });

    getType();
  } catch (error) {
    console.error("撤回失败:", error);
  }
};

// 选择图片
const avatarChoose = (item) => {
  picType.value = item;

  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success(res) {
      imgUpload(res.tempFilePaths);
    },
  });
};

// 上传图片
const imgUpload = (file) => {
  uni.uploadFile({
    url: "https://mall.xiyibaomall.com/xyb/fe/fileUpload",
    filePath: file[0],
    name: "file",
    success: (res) => {
      const data = JSON.parse(res.data);
      if (data.data?.[0]?.fileName) {
        const fileName = data.data[0].fileName;

        if (picType.value === 1) {
          businessLicenseFront.value = fileName;
        } else if (picType.value === 2) {
          idCardFront.value = fileName;
        } else {
          storePicture.value = fileName;
        }
      }
    },
    fail: (error) => {
      console.error("上传失败:", error);
      uni.showToast({
        title: "上传失败",
        icon: "none",
      });
    },
  });
};

// 页面显示时
onShow(() => {
  getType();
});
</script>

<style lang="scss">
.container {
  display: block;
  padding-top: 30rpx;
  padding-bottom: 200rpx;
}

.ui-all {
  width: 95vw;
  background-color: #ffffff;
  padding: 10upx 40upx;
  border-radius: 20upx;
  margin: 0 auto;

  .ui-all-title {
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-weight: 600;
  }
}

.ui1-box {
  width: 95vw;
  background-color: #ffffff;
  padding: 10upx 40upx;
  border-radius: 20upx;
  margin: 30upx auto 0;
}

.ui-box {
  width: 95vw;
  background-color: #ffffff;
  padding: 10upx 40upx;
  border-radius: 20upx;
  margin: 30upx auto 0;
}

.pic-box {
  width: 95vw;
  background-color: #ffffff;
  padding: 10upx 40upx;
  border-radius: 20upx;
  margin: 30upx auto;

  // text-align: center;
  .pic-box-box {
    display: flex;
    justify-content: space-between;

    .imgAvatar {
      width: 40%;

      .iavatar {
        width: 100%;
        height: 200rpx;
        border-radius: 10rpx;
      }

      .iavatars {
        width: 100%;
        height: 200rpx;
      }
    }
  }

  .imgAvatars {
    width: 100%;

    .imgAvatars-iavatar {
      width: 100%;
    }

    .imgAvatars-iavatars {
      width: 200rpx;
    }
  }
}

.b-b {
  border-bottom: 1px solid #dadada;
}

.uifrom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20upx 0;
  font-size: 28upx;

  .uifrom-time {
    display: flex;
    align-items: center;
    width: 70%;

    text {
      padding: 0 30rpx;
    }
  }

  input {
    width: 70%;
    font-size: 28upx;
  }

  .uifrom-btn {
    background: #148744;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 5upx;
    padding: 6rpx 28rpx;
  }
}

.uifrom-end {
  align-items: flex-start;

  textarea {
    width: 70%;
    height: 60px;
    font-size: 28upx;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 5px;
  }
}

.uibtn {
  text-align: end;
  padding-top: 10rpx;

  button {
    background: #148744;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 5upx;
    height: 60rpx;
    line-height: 60rpx;
    display: inline-flex;
    margin-left: 10rpx;
  }
}

.uifrom-save {
  width: 100%;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  padding: 30rpx 0;
  box-shadow: 0px -1px 3px 0px #dadada;

  .save {
    background: #148744;
    color: #ffffff;
    margin-top: 40rpx auto;
    font-size: 28rpx;
    width: 95vw;
    border-radius: 50upx;
  }
}
</style>
